<template>
  <section id="home-img" >
      <div class="flex-col-wrapper">
        <p class="p1 flex-row-wrapper">007.icu的博客</p>
        <p class="p2 flex-row-wrapper">热爱生活，热爱自己</p>
      </div>
  </section>
  <section id="home-recommend">
      <div class="top-wrapper">
          <p>推荐</p>
          <p><a href="#">更多文章 > </a></p>
      </div>
      <div class='articles'>
          <home-recommend img="../../assets/img/joshua-coleman-KzPefInJW58-unsplash.jpg" title="测试title" introduction="hello five" />
          
      </div>
  </section>
  <section id="home-link">
      <div class="top-wrapper">
          <p>友情链接</p>
      </div>
    <div class="link">
        <home-link img="../../assets/img/joshua-coleman-KzPefInJW58-unsplash.jpg" link="#" />
    </div>
  </section>
</template>
<script>
import HR from './home-recommend.vue'
import HL from './home-link.vue'

import {ref,onMounted} from 'vue'
export default{
    components:{
        'home-recommend':HR,
        'home-link':HL,
    },
    updated(){
        this.goto('content')
    }
}
</script>
<style scoped lang="less">

.home-title{
    display: flex;
    justify-content: space-between;
    font-size: 3vw;

    p{
        margin: 10vh;
        width: 15vw;
        height: 4vw;
    }

    p:first-child{
        font-weight: 900;
        line-height: 4vw;
    }
}

#home-img{
    width: 100%;
    height: 80vh;
    background-image: url('../../assets/img/home-1.jpg');
    background-size:100% 100%;
    
    p{
        margin-top: 4vh;
    }
}

#home-recommend{
    .top-wrapper{
        .home-title;
      
        p:last-child{
            border: 1px solid #1E85E3;
            border-radius: 3px;
            color: #1E85E3;
            text-align: center;
            a{
                font-size: 2vw;
                color: inherit;
            }

              &:hover{
                    background: #1E85E3;
                    color:white;
                }
        }
    }

    .articles{
        margin-left: 10vw;
    }
}

#home-link{
    .top-wrapper{
        .home-title
    }

    .link{
        margin-left: 10vw;
    }
}
</style>